<template>
    <div ref="canvas"></div>
</template>

<script lang="ts" setup>
import chroma from 'chroma-js';
import { Application, Sprite, BaseTexture, Texture } from 'pixi.js';
import { onMounted, ref } from 'vue';
let app = new Application({
    antialias: false,
    backgroundColor: 0,

    autoDensity: true,
});
const canvas = ref<HTMLElement>()

onMounted(async () => {

    const imageData = new ImageData(100, 100, {});

    // Iterate through every pixel
    for (let i = 0; i < imageData.data.length; i += 4) {
        // Modify pixel data
        imageData.data[i + 0] = 190;  // R value
        imageData.data[i + 1] = 0;    // G value
        imageData.data[i + 2] = 210;  // B value
        imageData.data[i + 3] = 255;  // A value
    }

    const imageBitmap = await createImageBitmap(imageData)
    const texture = Texture.from(imageBitmap)
    canvas.value?.appendChild(app.view)
    const s = new Sprite(texture)
    app.stage.addChild(s)
})

</script>